<template>
	<!-- <view class="container" :style="{paddingTop:tH}">
		<view class="headerTit" :style="{height:tH,paddingTop:pT}">
			泗河基地
		</view> -->
	<sys-container :label="'消防设施操作员理论练习与考试'" showBack withoutTop="true">
		<template v-slot:content>
			<view class="warp">
				<view class="seeAnswer" @tap="seeAskCard">
					<view class="desc">
						<image src="@/static/images/icon/edit.png" mode="widthFix"
							style="width: 40rpx;margin-right: 20rpx;"></image>
						<text>查看答题卡</text>
					</view>
					<view class="leftTime">
						{{leftTime}}
					</view>
				</view>
				<view class="taskList" >
					<swiper :indicator-dot="false" :autoplay="false" style="width:100%;height:100%"  :current="currentTask" @change="changePage">
						<swiper-item style="width:100%;min-height:100%;overflow: auto;" v-for="(item,index) in testList" :key="index">
							<view class="singleTask" style="height:100%;" v-if="index==currentTask">
								<view class="taskTit">
									<u-tag bg-color="#E70012" color="#fff" :text="(item.question_type==1?'单选':item.question_type==2?'多选':'判断')+'题'" /> 
									<text class="title" style="margin-left:12rpx">
										{{index+1}}.{{item.stem}}
									</text>
								</view>
								<view class="selectBox">
									<!-- <image slot="icon" src="{{ radio === '2' ? icon.active : icon.normal }}" /> -->
									<view class="singleSelect" >
										<radio-group @change="(e)=>onchange(e.detail.value,item)" v-if="item.question_type==1||item.question_type==3">
											<label class="singleRadio" v-for="(op,idx) in Object.keys(item.option)" :key="idx">
												<view>
													<radio :value="op" :checked="item.res === op" />
												</view>
												<view>{{op}}:{{item.option[op]}}</view>
											</label>
										</radio-group>
										<checkbox-group @change="(e)=>changeCheckBox(e.detail.value,item)" v-if="item.question_type==2">
														<label class="singleRadio" v-for="(op,idx) in Object.keys(item.option)" :key="idx">
															<view>
																<checkbox :value="item.option[op]"  />
															</view>
															<view>{{op}}:{{item.option[op]}}</view>
														</label>
													</checkbox-group>
									</view>
								
								
									<view class="answerBox" v-if="params.type==1">
										<view @tap="tapToShowAnswer(item)" style="color:#DF1004">
											显示答案
										</view>
										<view class="taskResult" v-if="(item.question_type==1||item.question_type==3)&&showAnswer">
											<view class="trueTask">
												正确答案：{{
													 Object.keys(item.option).find(r=>{
														 
														return item.option[r] == item.answer
													}) 
												}}:{{item.answer}} 
											</view>
											<view class="falseTask">
												{{item.analysis||''}}
											</view>
										</view>
										<view class="taskResult" v-else-if="item.question_type==2&&showAnswer">
											<view class="trueTask">
												正确答案：{{item.answer.split(',').map(data=>{
													return Object.keys(item.option).find(r=>{
														return item.option[r] == data
													})
												}).join(',')}}:{{item.answer}}
											</view>
											<view class="falseTask">
												{{item.analysis||''}}
											</view>
										</view>
									</view>
									
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				
				<view class="btnArea">
					<u-button  plain  :custom-style="{width:'240rpx',height:'75rpx',borderRadius:0,background:'#DF1004',color:'#fff'}" @click="prevTask">上一题</u-button>
					<u-button  :custom-style="{width:'175rpx',height:'75rpx',background:'#DF1004',color:'#fff'}" @click="saveTask">保存</u-button>
					<u-button  plain  :custom-style="{width:'240rpx',height:'75rpx',borderRadius:0,background:'#DF1004',color:'#fff'}" @click="nextTask">下一题</u-button>
				</view>
			</view>

		</template>

	</sys-container>

	<!-- </view> -->
</template>

<script>
	import {testPaperQuestions,submitQuestions} from '@/globalApi/requestApi.js'
	export default {
		components: {

			// sysContainer
		},
		data() {
			return {
				testList: [],
				params:{
					test_id:'',
					type:'',
				},
				singelHandleValue:'',
				currentTask:0,
				recordId:'',
				allStartTime:'',
				leftTime:'00:00:00',
				testTimeHour:0,
				timer:null,
				showAnswer:false,
				answerArr:[]
			}
		},
		onLoad(options) {
			this.testTimeHour = options.testTime*60*1000
			if(this.testTimeHour==0){
				this.testTimeHour = 100*60*1000
			}
			// this.timeLeftFun()
			this.params= {
				test_id:options.id,
				type:options.type
			}
			this.recordId = options.recordId
			uni.showLoading({
				title:'加载中'
			})
			this.getTest()
		},
		onShow(){
			let that = this
			// clearInterval(that.timer)
			// this.timer = null
			if(!this.timer){
				this.timer = setInterval(function(){
						that.testTimeHour -= 1000
						if(that.testTimeHour>=1000){
							that.leftTime = that.timeLeftFun()
						}else{
							clearInterval(that.timer)
							that.timer = null
						}
					},1000)
			}
			
		},
		beforeDestroy() {
			// clearInterval(that.timer)
			// this.timer = null
		},
		methods: {
			tapToShowAnswer(data){
				this.showAnswer = !this.showAnswer
			},
			timeLeftFun(){
				var h = Math.floor(this.testTimeHour/(1000*60*60)%24).toString().padStart(2,'0'),  //计算小时数
				        m= Math.floor(this.testTimeHour/(1000*60)%60).toString().padStart(2,'0'),  //计算分钟数
				        s= Math.floor(this.testTimeHour/1000%60).toString().padStart(2,'0'); 
						return h+':'+m+':'+s
				
				
				
			},
			changePage(e){
				// console.log(e)
				this.onlySave()
				this.currentTask = e.detail.current
				this.showAnswer = false
			},
			seeAskCard(fine){
				var finished = false
				if(fine){
					finished = true
				}
				uni.navigateTo({
					url:'../askCard/askCard?testId='+this.params.test_id+'&type='+this.params.type+'&finished='+finished+'&recordId='+this.recordId+'&allStartTime='+this.allStartTime+'&testTimeHour='+this.testTimeHour
				})
			},
			changeCheckBox(val,row){
				this.testList[this.currentTask].res= val.join(',')
				row.res = val.join(',')
			},
			onchange(val,row){
				// console.log(val,row)
				this.testList[this.currentTask].res = val
				row.res = val
			},
			getTest(){
				let that = this
				testPaperQuestions(this.params).then(res=>{
					if(res.code==200){
						uni.hideLoading()
						this.testList = res.data
						this.testList.forEach(item=>{
							item.res=null
							if(that.params.type==1&&item.question_type==2){
								// console.log(item)
								that.answerArr = item.answer.split(',').map(data=>{
									return  Object.keys(item.option).find(data=>{
										// console.log(data,item)
										return item.option[data] == data
									})
								})
							}
						})
						console.log(this.testList)
						this.testList[0].start_time=Date.parse(new Date())/1000;
						this.allStartTime=Date.parse(new Date())/1000;
						
					}
				})
			},
			toResult(fine){
				
				uni.navigateTo({
					url:'../testResult/testResult'
				})
			},
			prevTask(){
				this.showAnswer = false
				if(this.currentTask>0){
					this.onlySave()
					this.currentTask -=1
					this.testList[this.currentTask].start_time = Date.parse(new Date())/1000;
				}
			},
			nextTask(){
				this.showAnswer = false
				if(this.currentTask<this.testList.length-1){
					this.onlySave()
					this.currentTask +=1
					this.testList[this.currentTask].start_time = Date.parse(new Date())/1000;
				}else{
					this.seeAskCard(true)
				}
			},
			saveTask(){
				var sumbData = this.testList[this.currentTask]
				var params = {
					e_id:this.recordId,
					questions_id:sumbData.questions_id,
					user_answer:sumbData.res,
					start_time:sumbData.start_time,
					end_time:Date.parse(new Date())/1000,
				}
				if(sumbData.question_type==1||sumbData.question_type==3){
					params.user_answer=sumbData.option[sumbData.res]
				}
				submitQuestions(params).then(res=>{
					if(res.code==200){
						this.testList[this.currentTask].isAsked=true
						this.nextTask()
					}
				})
			},
			onlySave(){
				var sumbData = this.testList[this.currentTask]
				if(!sumbData.isAsked&&sumbData.res){
					var params = {
						e_id:this.recordId,
						questions_id:sumbData.questions_id,
						user_answer:sumbData.res,
						start_time:sumbData.start_time,
						end_time:Date.parse(new Date())/1000,
					}
					if(sumbData.question_type==1||sumbData.question_type==3){
						params.user_answer=sumbData.option[sumbData.res]
					}
					submitQuestions(params).then(res=>{
						if(res.code==200){
							sumbData.isAsked = true
							// this.nextTask()
						}
					})
				}
				
			},
			getTask(idx){
				this.currentTask = idx
				this.testList[this.currentTask].start_time = Date.parse(new Date())/1000;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warp {
		height: 100%;
		width: 100%;
		background: #f8f8f8;
		// overflow: hidden;
		// padding-bottom: 165rpx;
		.taskResult{
			width:100%;
			// display: flex;
			// align-items: center;
			// justify-content: flex-start;
			padding:20rpx 30rpx;
			background:#FBD9DC;
			margin-top: 20rpx;
			box-sizing: border-box;
			.trueTask{
				margin-right:50rpx;
			}
		}
		.seeAnswer {
			width: 100%;
			height: 92rpx;
			padding: 30rpx 50rpx;
			box-sizing: border-box;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.desc {
				display: flex;
				align-items: center;
			}

		}

		.taskList {
			margin-top: 25rpx;
			width: 100%;
			height:calc(100% - 92rpx);
			overflow:auto;
			padding: 30rpx 40rpx;
			box-sizing: border-box;
			.singleTask {
				width: 100%;

				.taskTit {
					width: 100%;
					// display: flex;
					// align-items: center;
					// justify-content: flex-start;
					margin-bottom: 43rpx;
					flex-wrap: wrap;
					.title {
						font-size: 30rpx;
						font-weight: 400;
						color: #222222;
					}
				}
				.singleSelect{
					margin-bottom:27rpx;
					display: flex;
					align-items:center;
					.singleRadio{
						display: flex;
						align-items: center;
						justify-content: flex-start;
						margin-bottom:27rpx;
					}
				}
			}
		}
		.btnArea{
			width:100%;
			position: fixed;
			bottom:45rpx;
			left:0;
			display:flex;
			align-items: center;
			justify-content: space-around;
		}
	}
</style>